<template>
  <div class="zh-box ">
    <header>
      <div class="tag divider-inside">{{ title }}</div>
      <div class="tag-style"></div>
    </header>
    <main>
      <slot></slot>
    </main>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  title: string;
}>();
</script>
<style scoped lang="less">
.zh-box {
  header {
    border-bottom: 2px solid var(--primary-color);
    display: flex;
    position: relative;
    .tag {
      font-size: 30px;
      display: inline-block;
      padding: 8px 30px;
      background-color: var(--primary-color);
      color: #fff;
      position: relative;
      z-index: 1;
    }
    .tag-style {
      align-self: stretch;
      width: 95px;
      background-color: var(--primary-color);
      position: relative;
      transform: skewX(45deg);
      position: relative;
      left: -30px;
      &::after,
      &::before {
        content: "";
        position: absolute;
        height: 100%;
        width: 6px;
        background-color: #fff;
        top: 0;
        bottom: 0;
      }
      &::before {
        right: 30px;
      }
      &::after {
        right: 15px;
      }
    }
    &::before,
    &::after {
      content: "";
      position: absolute;
      left: -35px;
      width: 35px;
      height: 100%;
      background-color: var(--primary-color);
      z-index: 1;
    }
    &::before {
      bottom: -10px;
      height: 35px;
      z-index: 0;
      transform: skewY(30deg);
      background-color: #405e6c;
    }
  }
  main {
    padding: 30px 50px;
  }
}
</style>
